﻿@model NuGetGallery.DeleteAccountRequest

@{
    ViewBag.Title = "Delete account";
}

<section role="main" class="container main-container">
    <h2>Delete Account</h2>
    <form>
        <textarea placeholder="Search for account to delete. Only one account at a time." autocomplete="off" autofocus style="width: 100%;" rows="5" class="textarea-brand" data-bind="value: searchQuery"></textarea><br />
        <input type="button" class="btn-brand-secondary" value="Search" data-bind="click: search" />
    </form>
    <div style="display: none" data-bind="visible: searchResults().length === 0 && doneSearching()">
        <p>No account found.</p>
    </div>
    <form id="searchResults" data-bind="visible: searchResults().length > 0">
        <p>The following accounts were found:</p>
        <ul id="searchResultsTable" class="sexy-table" style="display: none" data-bind="visible: searchResults().length > 0">
            <li data-bind="foreach: searchResults">
                <a href="#" data-bind="text: AccountName, attr: { href: $parent.generateProfileUrl($data) }"></a>
            </li>
        </ul>
    </form>
</section>

@section BottomScripts {
    <script>
        $(document).ready(function() {
            var viewModel = function () {
                var $self = this;

                this.searchQuery = ko.observable('');
                $self.doneSearching = ko.observable(false);

                this.search = function () {
                    $self.doneSearching = ko.observable(false);
                    $.ajax({
                        url: '@Url.Action("Search", "DeleteAccount", new {area = "Admin"})?query=' + encodeURIComponent($self.searchQuery().trim()),
                            cache: false,
                            dataType: 'json',
                            success: function(data) {
                                for (var i = 0; i < data.length; i++) {
                                    data[i].Selected = ko.observable(false);
                                }
                                $self.searchResults(data);
                            }
                        })
                        .fail(function(jqXhr, textStatus, errorThrown) {
                            alert("Error: " + errorThrown);
                        })
                        .always(function () {
                            $self.doneSearching(true);
                        });
                };
                this.generateProfileUrl = function (u) {
                    return '/profiles/' + u.AccountName;
                };
                this.searchResults = ko.observableArray([]);
            };

            ko.applyBindings(new viewModel(), $('.main-container').get(0));
        });
    </script>
}